import './503.scss' 
import { ProgressCircle } from 'antd-mobile'
import {useState,useEffect} from 'react'
import _ from 'lodash'
import { useCountDown ,useInterval} from 'ahooks'

import { useTiaoZhuan } from '../../hooks/routers'
export const NotServer = () => {
    const [start,setStart] = useState<number>() 
    const [InervalData,setIntervalData] = useState<number>(0)
    const {Tz}= useTiaoZhuan()
    const [countDown] = useCountDown({
        leftTime:start,
        interval:10,
        onEnd:()=>{
            Tz('/homes')
        }
    })
    useEffect(()=>{
        setStart(5000)

    },[])

    const clear = useInterval(()=>{
        if(InervalData>=100){
            clear()
            Tz('/homes')
        }else{
            setIntervalData(InervalData+1)

        }

    },50)
    return (
        <div className="boxs">
            {/* <ProgressCircle
                percent={Math.ceil(countDown/1000*20)}
                style={{
                    '--fill-color': 'var(--adm-color-warning)',
                    position:'absolute',
                    right:'0',
                    top:"0",
                    color:'white',
                    marginTop:'10px',
                    marginRight:'10px'
                }}
            >
                {Math.ceil(countDown/1000*20)}%
            </ProgressCircle> */}


            <ProgressCircle
                percent={InervalData}
                style={{
                    '--fill-color': 'var(--adm-color-warning)',
                    position:'absolute',
                    right:'0',
                    top:"0",
                    color:'white',
                    marginTop:'10px',
                    marginRight:'10px'
                }}
            >
                {InervalData}%
            </ProgressCircle>
        </div>
    )
}